<template>
  <div class="goods-container">
    <el-card class="goods-card">
      <div slot="header" class="clearfix">
        <span class="header-title"><i class="el-icon-goods"></i> 商品管理</span>
        <el-button-group style="float: right;">
          <el-button type="primary" @click="showAddDialog" icon="el-icon-plus">添加商品</el-button>
          <el-button type="danger" @click="resetGoodsId" icon="el-icon-refresh-right">重置商品ID</el-button>
        </el-button-group>
      </div>
      
      <el-row :gutter="20" class="action-row">
        <el-col :span="8">
          <account-selector v-model="selectedAccount" />
        </el-col>
        <el-col :span="16">
          <el-button type="primary" @click="refreshGoodsList" icon="el-icon-refresh">刷新列表</el-button>
          <el-button type="info" @click="switchView">
            <i :class="isCardView ? 'el-icon-menu' : 'el-icon-s-grid'"></i>
            {{ isCardView ? '表格视图' : '卡片视图' }}
          </el-button>
        </el-col>
      </el-row>
      
      <!-- 统计信息 -->
      <el-alert 
        v-if="filteredGoodsList && filteredGoodsList.length > 0"
        type="success" 
        :closable="false" 
        class="stats-alert">
        <template>
          <div class="stats-container">
            <div class="stat-item">
              <i class="el-icon-goods"></i> 共 <strong>{{ filteredGoodsList.length }}</strong> 个商品
            </div>
            <div class="stat-item">
              <i class="el-icon-user"></i> 您拥有 <strong>{{ ownedGoodsCount }}</strong> 个商品
            </div>
          </div>
        </template>
      </el-alert>
      
      <!-- 空数据提示 -->
      <div class="empty-container" v-if="!loading && (!filteredGoodsList || filteredGoodsList.length === 0)">
        <el-empty 
          description="商品列表为空" 
          :image-size="200">
          <template slot="description">
            <div class="empty-description">
              <p class="main-text">暂无商品数据</p>
              <p class="sub-text">您可以点击下方按钮添加新商品开始使用</p>
            </div>
          </template>
          <el-button type="primary" @click="showAddDialog" icon="el-icon-plus" size="medium">添加第一个商品</el-button>
          <div class="empty-tips">
            <div class="tip-item">
              <i class="el-icon-info"></i>
              <span>添加的商品将记录在区块链上</span>
            </div>
            <div class="tip-item">
              <i class="el-icon-user"></i>
              <span>确保已选择正确的账户</span>
            </div>
          </div>
        </el-empty>
      </div>
      
      <!-- 表格视图 -->
      <el-table 
        v-if="!isCardView && filteredGoodsList && filteredGoodsList.length > 0" 
        :data="filteredGoodsList" 
        style="width: 100%" 
        v-loading="loading"
        border
        stripe
        highlight-current-row>
        <el-table-column prop="id" label="ID" width="80" sortable></el-table-column>
        <el-table-column prop="name" label="名称" sortable>
          <template slot-scope="scope">
            <el-link type="primary" @click="viewGoods(scope.row)">{{ scope.row.name }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述">
          <template slot-scope="scope">
            <el-tooltip 
              :content="scope.row.description" 
              placement="top" 
              :disabled="scope.row.description.length < 20">
              <span>{{ scope.row.description.length > 20 ? scope.row.description.substring(0, 20) + '...' : scope.row.description }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="owner" label="所有者" width="160">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.owner" placement="top" effect="light">
              <el-tag :type="getOwnerTagType(scope.row.owner)" size="medium">
                {{ getAccountNameByAddress(scope.row.owner) }}
              </el-tag>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template slot-scope="scope">
            <el-button-group>
              <el-button size="mini" @click="viewGoods(scope.row)" icon="el-icon-view"></el-button>
              <el-button size="mini" type="primary" @click="editGoods(scope.row)" icon="el-icon-edit"
                :disabled="!isCurrentUserOwner(scope.row.owner)"></el-button>
              <el-button size="mini" type="success" @click="showTransferDialog(scope.row)" icon="el-icon-position" 
                :disabled="!isCurrentUserOwner(scope.row.owner)"></el-button>
              <el-button size="mini" type="danger" @click="confirmDelete(scope.row)" icon="el-icon-delete"
                :disabled="!isCurrentUserOwner(scope.row.owner)"></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 卡片视图 -->
      <div v-if="isCardView && filteredGoodsList && filteredGoodsList.length > 0">
        <el-row :gutter="20" class="card-view">
          <el-col 
            :xs="24" 
            :sm="12" 
            :md="8" 
            :lg="6" 
            v-for="item in filteredGoodsList" 
            :key="item.id" 
            class="card-col">
            <el-card shadow="hover" class="goods-item-card">
              <div slot="header" class="clearfix">
                <span class="card-title">{{ item.name }}</span>
                <el-tag size="mini" class="card-id">ID: {{ item.id }}</el-tag>
              </div>
              
              <div class="card-content">
                <p class="card-description">{{ item.description }}</p>
                
                <el-divider content-position="left">所有者</el-divider>
                
                <div class="card-owner">
                  <el-tag :type="getOwnerTagType(item.owner)">
                    {{ getAccountNameByAddress(item.owner) }}
                  </el-tag>
                </div>
                
                <div class="card-actions">
                  <el-button-group>
                    <el-button size="mini" @click="viewGoods(item)" icon="el-icon-view"></el-button>
                    <el-button size="mini" type="primary" @click="editGoods(item)" icon="el-icon-edit"
                      :disabled="!isCurrentUserOwner(item.owner)"></el-button>
                    <el-button size="mini" type="success" @click="showTransferDialog(item)" icon="el-icon-position"
                      :disabled="!isCurrentUserOwner(item.owner)"></el-button>
                    <el-button size="mini" type="danger" @click="confirmDelete(item)" icon="el-icon-delete"
                      :disabled="!isCurrentUserOwner(item.owner)"></el-button>
                  </el-button-group>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      
      <!-- 添加商品对话框 -->
      <el-dialog 
        title="添加商品" 
        :visible.sync="addDialogVisible" 
        width="40%" 
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="true" 
        custom-class="tech-dialog"
        :modal-append-to-body="true"
        :destroy-on-close="false"
        :lock-scroll="true"
        :show-close="true"
        @closed="$nextTick(() => this.$forceUpdate())">
        <el-form :model="goodsForm" label-width="80px" :rules="rules" ref="goodsForm">
          <el-form-item label="名称" prop="name">
            <el-input v-model="goodsForm.name"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input type="textarea" v-model="goodsForm.description"></el-input>
          </el-form-item>
          <el-form-item label="账户">
            <el-select v-model="goodsForm.account" placeholder="选择账户" style="width: 100%">
              <el-option
                v-for="(address, name) in filteredAccounts"
                :key="name"
                :label="`${name} (${address.substring(0, 8)}...)`"
                :value="name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeAllDialogs">取消</el-button>
          <el-button type="primary" @click="addGoods">确定</el-button>
        </span>
      </el-dialog>
      
      <!-- 编辑商品对话框 -->
      <el-dialog 
        title="编辑商品" 
        :visible.sync="editDialogVisible" 
        width="40%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="true" 
        custom-class="tech-dialog"
        :modal-append-to-body="true"
        :destroy-on-close="false"
        :lock-scroll="true"
        :show-close="true"
        @closed="$nextTick(() => this.$forceUpdate())">
        <el-form :model="goodsForm" label-width="80px" :rules="rules" ref="editForm">
          <el-form-item label="ID">
            <el-input v-model="goodsForm.goodsId" disabled></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="goodsForm.name"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input type="textarea" v-model="goodsForm.description"></el-input>
          </el-form-item>
          <el-form-item label="账户">
            <el-select v-model="goodsForm.account" placeholder="选择账户" style="width: 100%">
              <el-option
                v-for="(address, name) in filteredAccounts"
                :key="name"
                :label="`${name} (${address.substring(0, 8)}...)`"
                :value="name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeAllDialogs">取消</el-button>
          <el-button type="primary" @click="updateGoods">确定</el-button>
        </span>
      </el-dialog>
      
      <!-- 转移商品对话框 -->
      <el-dialog 
        title="转移商品" 
        :visible.sync="transferDialogVisible" 
        width="40%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="true" 
        custom-class="tech-dialog"
        :modal-append-to-body="true"
        :destroy-on-close="false"
        :lock-scroll="true"
        :show-close="true"
        @closed="$nextTick(() => this.$forceUpdate())">
        <el-form :model="transferForm" label-width="120px" :rules="transferRules" ref="transferForm">
          <el-form-item label="商品ID">
            <el-input v-model="transferForm.goodsId" disabled></el-input>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="transferForm.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="当前所有者">
            <el-input :value="getAccountNameByAddress(transferForm.currentOwner)" disabled></el-input>
          </el-form-item>
          <el-form-item label="转移到" prop="to">
            <el-select v-model="transferForm.to" placeholder="选择接收者账户" style="width: 100%" filterable>
              <el-option
                v-for="(address, name) in filteredAccounts"
                :key="`to-${name}`"
                :label="`${name} (${address.substring(0, 8)}...)`"
                :value="address">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeAllDialogs">取消</el-button>
          <el-button type="primary" @click="transferGoods">确定</el-button>
        </span>
      </el-dialog>
      
      <!-- 交易结果对话框 -->
      <el-dialog 
        title="交易详情" 
        :visible.sync="txDialogVisible" 
        width="50%" 
        center
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="true" 
        custom-class="tech-dialog"
        :modal-append-to-body="true"
        :destroy-on-close="false"
        :lock-scroll="true"
        :show-close="true"
        @closed="$nextTick(() => this.$forceUpdate())">
        <div class="tx-result-container">
          <el-result
            :icon="txResult.success ? 'success' : 'error'"
            :title="txResult.title"
            :sub-title="txResult.message">
            <template slot="extra">
              <div class="tx-details" v-if="txResult.success">
                <el-descriptions border :column="1">
                  <el-descriptions-item label="交易哈希">
                    <el-tag type="info" effect="plain">{{ txResult.txHash }}</el-tag>
                    <el-button type="text" size="mini" @click="copyToClipboard(txResult.txHash)">
                      <i class="el-icon-document-copy"></i> 复制
                    </el-button>
                  </el-descriptions-item>
                  <el-descriptions-item v-if="txResult.extraInfo" label="其他信息">
                    {{ txResult.extraInfo }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </template>
          </el-result>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeAllDialogs">确定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { goodsApi, handleApiError, BLOCKED_ACCOUNTS } from '@/utils/api'
import { mapState } from 'vuex'
import AccountSelector from '@/components/AccountSelector.vue'

export default {
  name: 'Goods',
  components: {
    AccountSelector
  },
  data() {
    return {
      loading: false,
      addDialogVisible: false,
      editDialogVisible: false,
      transferDialogVisible: false,
      txDialogVisible: false,
      txResult: {
        success: false,
        title: '',
        message: '',
        txHash: '',
        extraInfo: null
      },
      goodsForm: {
        name: '',
        description: '',
        account: '',
        goodsId: ''
      },
      transferForm: {
        goodsId: '',
        name: '',
        currentOwner: '',
        to: '',
        account: ''
      },
      rules: {
        name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        description: [{ required: true, message: '请输入商品描述', trigger: 'blur' }]
      },
      transferRules: {
        to: [{ required: true, message: '请选择接收者账户', trigger: 'change' }]
      },
      isCardView: true
    }
  },
  computed: {
    ...mapState(['accounts', 'goodsList', 'selectedAccount']),
    
    // 选择账户的计算属性，支持双向绑定
    selectedAccount: {
      get() {
        return this.$store.state.selectedAccount
      },
      set(value) {
        this.$store.commit('setSelectedAccount', value)
        this.refreshGoodsList()
      }
    },
    
    // 计算当前账户拥有的商品数量
    ownedGoodsCount() {
      if (!this.accounts || !this.selectedAccount) return 0;
      const currentAddress = this.accounts[this.selectedAccount];
      return this.filteredGoodsList.filter(item => item.owner === currentAddress).length;
    },
    
    // 过滤有效的商品数据
    filteredGoodsList() {
      if (!this.goodsList) return [];
      
      return this.goodsList.filter(good => {
        return good && good.name && good.name.trim() !== "";
      });
    },
    
    // 添加过滤账户的计算属性
    filteredAccounts() {
      // 不再过滤任何账户，直接返回所有账户
      const filtered = {...this.accounts};
      // 如果仍需要使用BLOCKED_ACCOUNTS，可以保留以下逻辑，但由于现在是空数组所以不会过滤掉任何账户
      BLOCKED_ACCOUNTS.forEach(address => {
        delete filtered[address];
      });
      
      console.log('显示所有账户:', Object.keys(filtered).length);
      return filtered;
    }
  },
  created() {
    // 从本地存储中获取视图模式
    const savedViewMode = localStorage.getItem('goodsViewMode');
    if (savedViewMode) {
      this.isCardView = savedViewMode === 'card';
    }
    
    this.initData()
  },
  methods: {
    async initData() {
      try {
        this.loading = true
        await this.$store.dispatch('fetchAccounts')
        await this.refreshGoodsList()
      } catch (error) {
        handleApiError(error)
      } finally {
        this.loading = false
      }
    },
    
    async refreshGoodsList() {
      if (!this.selectedAccount) return
      
      try {
        this.loading = true
        await this.$store.dispatch('fetchGoodsList')
      } catch (error) {
        handleApiError(error)
      } finally {
        this.loading = false
      }
    },
    
    // 关闭所有对话框的方法
    closeAllDialogs() {
      this.addDialogVisible = false
      this.editDialogVisible = false
      this.transferDialogVisible = false
      this.txDialogVisible = false
      
      // 返回一个Promise，确保对话框完全关闭
      return new Promise(resolve => setTimeout(resolve, 300))
    },
    
    // 修改显示添加对话框的方法
    async showAddDialog() {
      this.goodsForm = {
        name: '',
        description: '',
        account: this.selectedAccount
      }
      
      // 先关闭所有对话框，然后等待DOM更新
      await this.closeAllDialogs()
      
      // 显示添加对话框
      this.addDialogVisible = true
      
      // 等待DOM更新后清除验证
      this.$nextTick(() => {
        this.$refs.goodsForm && this.$refs.goodsForm.clearValidate()
      })
    },
    
    async addGoods() {
      try {
        await this.$refs.goodsForm.validate()
        
        this.loading = true
        const response = await goodsApi.addGoods(this.goodsForm)
        
        if (response.data.success) {
          // 先关闭当前对话框
          await this.closeAllDialogs()
          
          // 显示成功对话框和交易哈希
          await this.showTxResult({
            success: true,
            title: '添加商品成功',
            message: `商品 "${this.goodsForm.name}" 已成功添加`,
            txHash: response.data.txHash || '未返回交易哈希',
            extraInfo: `商品ID: ${response.data.goodsId || '未知'}`
          })
          
          // 刷新商品列表
          this.refreshGoodsList()
        } else {
          await this.closeAllDialogs()
          await this.showTxResult({
            success: false,
            title: '添加商品失败',
            message: response.data.message || '操作失败'
          })
        }
      } catch (error) {
        handleApiError(error)
      } finally {
        this.loading = false
      }
    },
    
    // 修改编辑对话框的方法
    async editGoods(goods) {
      // 检查当前用户是否是商品所有者
      if (!this.isCurrentUserOwner(goods.owner)) {
        this.$message.warning('只有商品所有者才能编辑商品')
        return
      }
      
      this.goodsForm = {
        goodsId: goods.id,
        name: goods.name,
        description: goods.description,
        account: this.selectedAccount
      }
      
      // 先关闭所有对话框，然后等待DOM更新
      await this.closeAllDialogs()
      
      // 显示编辑对话框
      this.editDialogVisible = true
      
      // 等待DOM更新后清除验证
      this.$nextTick(() => {
        this.$refs.editForm && this.$refs.editForm.clearValidate()
      })
    },
    
    async updateGoods() {
      try {
        await this.$refs.editForm.validate()
        
        this.loading = true
        const response = await goodsApi.updateGoods(this.goodsForm)
        
        if (response.data.success) {
          // 先关闭当前对话框
          await this.closeAllDialogs()
          
          // 显示成功对话框和交易哈希
          await this.showTxResult({
            success: true,
            title: '更新商品成功',
            message: `商品 "${this.goodsForm.name}" 已更新`,
            txHash: response.data.txHash || '未返回交易哈希'
          })
          
          // 刷新商品列表
          this.refreshGoodsList()
        } else {
          await this.closeAllDialogs()
          await this.showTxResult({
            success: false,
            title: '更新商品失败',
            message: response.data.message || '操作失败'
          })
        }
      } catch (error) {
        handleApiError(error)
      } finally {
        this.loading = false
      }
    },
    
    // 修改转移对话框的方法
    async showTransferDialog(goods) {
      // 检查当前用户是否是商品所有者
      if (!this.isCurrentUserOwner(goods.owner)) {
        this.$message.warning(`只有商品所有者才能转移商品。当前所有者: ${this.getAccountNameByAddress(goods.owner)}`)
        return
      }
      
      this.transferForm = {
        goodsId: goods.id,
        name: goods.name,
        currentOwner: goods.owner,
        to: '',
        account: this.selectedAccount
      }
      
      // 先关闭所有对话框，然后等待DOM更新
      await this.closeAllDialogs()
      
      // 显示转移对话框
      this.transferDialogVisible = true
      
      // 等待DOM更新后清除验证
      this.$nextTick(() => {
        this.$refs.transferForm && this.$refs.transferForm.clearValidate()
      })
    },
    
    async transferGoods() {
      try {
        await this.$refs.transferForm.validate()
        
        this.loading = true
        const response = await goodsApi.transferGoods(this.transferForm)
        
        if (response.data.success) {
          // 先关闭当前对话框
          await this.closeAllDialogs()
          
          // 显示成功对话框和交易哈希
          await this.showTxResult({
            success: true,
            title: '转让商品成功',
            message: `商品已成功转让给 ${this.transferForm.toAddress}`,
            txHash: response.data.txHash || '未返回交易哈希'
          })
          
          // 刷新商品列表
          this.refreshGoodsList()
        } else {
          await this.closeAllDialogs()
          await this.showTxResult({
            success: false,
            title: '转让商品失败',
            message: response.data.message || '操作失败'
          })
        }
      } catch (error) {
        handleApiError(error)
      } finally {
        this.loading = false
      }
    },
    
    confirmDelete(goods) {
      // 检查当前用户是否是商品所有者
      if (!this.isCurrentUserOwner(goods.owner)) {
        this.$message.warning('只有商品所有者才能删除商品');
        return;
      }
      
      this.$confirm('确定要删除这个商品吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(async () => {
        this.removeGoods(goods)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }).finally(() => {
        this.loading = false
      })
    },
    
    async removeGoods(goods) {
      try {
        this.$confirm('确定要删除这个商品吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal: false
        }).then(async () => {
          this.loading = true
          const response = await goodsApi.removeGoods(goods.id)
          
          if (response.data.success) {
            // 先关闭当前对话框
            await this.closeAllDialogs()
            
            // 显示成功对话框和交易哈希
            await this.showTxResult({
              success: true,
              title: '删除商品成功',
              message: `商品已成功删除`,
              txHash: response.data.txHash || '未返回交易哈希'
            })
            
            // 刷新商品列表
            this.refreshGoodsList()
          } else {
            await this.closeAllDialogs()
            await this.showTxResult({
              success: false,
              title: '删除商品失败',
              message: response.data.message || '操作失败'
            })
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        }).finally(() => {
          this.loading = false
        })
      } catch (error) {
        handleApiError(error)
      }
    },
    
    async resetGoodsId() {
      try {
        this.$confirm('确定要重置商品ID吗? 这将把商品ID重置为1。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal: false
        }).then(async () => {
          this.loading = true
          const response = await goodsApi.resetGoodsId()
          
          if (response.data.success) {
            // 先关闭当前对话框
            await this.closeAllDialogs()
            
            // 显示成功对话框和交易哈希
            await this.showTxResult({
              success: true,
              title: '重置商品ID成功',
              message: '商品ID已成功重置为1',
              txHash: response.data.txHash || '未返回交易哈希'
            })
            
            // 刷新商品列表
            this.refreshGoodsList()
          } else {
            await this.closeAllDialogs()
            await this.showTxResult({
              success: false,
              title: '重置商品ID失败',
              message: response.data.message || '操作失败'
            })
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消重置'
          })
        }).finally(() => {
          this.loading = false
        })
      } catch (error) {
        handleApiError(error)
      }
    },
    
    viewGoods(goods) {
      this.$router.push(`/goods/detail/${goods.id}`)
    },
    
    switchView() {
      this.isCardView = !this.isCardView;
      // 保存视图模式到本地存储
      localStorage.setItem('goodsViewMode', this.isCardView ? 'card' : 'table');
    },
    
    // 根据所有者地址确定标签类型
    getOwnerTagType(owner) {
      if (!this.accounts || !this.selectedAccount) return 'info';
      
      const currentAddress = this.accounts[this.selectedAccount];
      return owner === currentAddress ? 'success' : 'info';
    },
    
    // 根据地址获取账户名称
    getAccountNameByAddress(address) {
      if (!this.accounts || !address) return '未知账户';
      
      // 遍历accounts对象，查找匹配的地址
      for (const [name, addr] of Object.entries(this.accounts)) {
        if (addr === address) {
          return name;
        }
      }
      
      // 如果没找到匹配的账户名，返回地址的简短形式
      return address.substring(0, 8) + '...';
    },
    
    // 判断当前用户是否是商品所有者
    isCurrentUserOwner(owner) {
      if (!this.accounts || !this.selectedAccount || !owner) {
        console.warn('无法验证所有权: 账户信息不完整或所有者为空', 
                    {accounts: this.accounts, selectedAccount: this.selectedAccount, owner: owner});
        return false;
      }
      
      const currentAddress = this.accounts[this.selectedAccount];
      
      // 获取账户名对应的地址
      let nameOfOwner = '';
      for (const [name, addr] of Object.entries(this.accounts)) {
        if (addr.toLowerCase() === owner.toLowerCase()) {
          nameOfOwner = name;
          break;
        }
      }
      
      // 添加调试信息，包括所有者的账户名
      console.log('所有权检查:', {
        owner: owner, // 商品所有者地址
        ownerAccountName: nameOfOwner || '未知账户', // 所有者对应的账户名
        currentAddress: currentAddress, // 当前选中的用户地址
        selectedAccount: this.selectedAccount, // 当前选中的账户名
        isOwner: owner.toLowerCase() === currentAddress.toLowerCase() // 不区分大小写比较
      });
      
      // 使用不区分大小写的比较
      return owner.toLowerCase() === currentAddress.toLowerCase();
    },
    
    // 修改交易结果对话框的方法
    async showTxResult(result) {
      this.txResult = result
      
      // 先关闭所有对话框，然后等待DOM更新
      await this.closeAllDialogs()
      
      // 显示交易结果对话框
      this.txDialogVisible = true
    },
    
    // 复制文本到剪贴板
    copyToClipboard(text) {
      const textarea = document.createElement('textarea')
      textarea.value = text
      document.body.appendChild(textarea)
      textarea.select()
      document.execCommand('copy')
      document.body.removeChild(textarea)
      this.$message.success('已复制到剪贴板')
    }
  }
}
</script>

<style scoped>
.goods-container {
  padding: 20px;
}

.goods-card {
  background-color: var(--medium-bg);
  border: 1px solid rgba(0, 204, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 102, 204, 0.15);
  overflow: hidden;
  position: relative;
}

.goods-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

.header-title {
  font-size: 20px;
  font-weight: bold;
  font-family: var(--font-heading);
  color: var(--text-primary);
  display: flex;
  align-items: center;
}

.header-title i {
  color: var(--accent-color);
  margin-right: 10px;
  font-size: 22px;
}

.action-row {
  margin-bottom: 20px;
}

.stats-alert {
  margin-bottom: 20px;
  background-color: rgba(0, 102, 204, 0.1) !important;
  border-color: rgba(0, 204, 255, 0.2) !important;
}

.stats-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 120px;
}

.stat-item i {
  color: var(--accent-color);
  margin-right: 8px;
  font-size: 18px;
}

.stat-item strong {
  color: var(--accent-color);
  margin: 0 4px;
}

.goods-item-card {
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 204, 255, 0.15);
  border-radius: 6px;
  transition: all 0.3s ease;
  height: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

.goods-item-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, transparent 100%);
  pointer-events: none;
}

.goods-item-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 204, 255, 0.2);
  border-color: rgba(0, 204, 255, 0.3);
}

.card-title {
  font-family: var(--font-heading);
  color: var(--text-primary);
  font-weight: bold;
  font-size: 16px;
}

.card-id {
  float: right;
  background-color: rgba(0, 204, 255, 0.1) !important;
  border-color: rgba(0, 204, 255, 0.2) !important;
  color: var(--accent-color) !important;
  font-family: var(--font-mono);
}

.card-content {
  position: relative;
  z-index: 1;
}

.card-description {
  color: var(--text-secondary);
  height: 60px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
}

.card-owner {
  margin-bottom: 15px;
}

.card-actions {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.card-view {
  margin-top: 20px;
}

.card-col {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.dialog-title {
  font-family: var(--font-heading);
  color: var(--text-primary);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.transaction-dialog {
  background-color: var(--medium-bg);
}

.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.empty-container {
  text-align: center;
  padding: 30px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  border: 1px dashed rgba(0, 204, 255, 0.2);
  margin: 20px 0;
}

.empty-description {
  margin-bottom: 20px;
}

.main-text {
  font-size: 20px;
  font-weight: bold;
  font-family: var(--font-heading);
  color: var(--text-primary);
  margin-bottom: 10px;
}

.sub-text {
  font-size: 14px;
  color: var(--text-secondary);
}

.empty-tips {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed rgba(0, 204, 255, 0.2);
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
}

.tip-item i {
  color: var(--accent-color);
}

/* 自定义Element UI样式 */
:deep(.el-table) {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

:deep(.el-table th) {
  background-color: var(--light-bg) !important;
  color: var(--text-primary) !important;
}

:deep(.el-table tr) {
  background-color: transparent !important;
}

:deep(.el-table td) {
  border-bottom-color: rgba(0, 204, 255, 0.1) !important;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: rgba(0, 102, 204, 0.1) !important;
}

:deep(.el-dialog__wrapper) {
  z-index: 3000 !important;
}

:deep(.el-dialog) {
  background-color: var(--medium-bg) !important;
  border: 1px solid rgba(0, 204, 255, 0.2) !important;
  border-radius: 6px !important;
  box-shadow: 0 0 20px rgba(0, 102, 204, 0.3) !important;
  position: relative !important;
  z-index: 3001 !important;
  margin-top: 15vh !important;
  overflow: visible !important;
}

:deep(.el-dialog::before) {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
  border-radius: 8px;
  z-index: -1;
  opacity: 0.5;
  filter: blur(3px);
}

:deep(.v-modal) {
  opacity: 0.8 !important;
  background-color: #0a1128 !important;
  z-index: 2999 !important;
}

:deep(.el-dialog__headerbtn) {
  z-index: 3010 !important;
}

:deep(.el-dialog__header) {
  border-bottom: 1px solid rgba(0, 204, 255, 0.2) !important;
  padding: 15px 20px !important;
}

:deep(.el-dialog__body) {
  padding: 20px !important;
  color: var(--text-secondary) !important;
}

:deep(.el-dialog__footer) {
  border-top: 1px solid rgba(0, 204, 255, 0.2) !important;
  padding: 15px 20px !important;
}

:deep(.el-dialog__title) {
  color: var(--text-primary) !important;
  font-family: var(--font-heading) !important;
}

:deep(.el-form-item__label) {
  color: var(--text-primary) !important;
}

:deep(.el-input__inner), :deep(.el-textarea__inner) {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(0, 204, 255, 0.2) !important;
  color: var(--text-primary) !important;
}

:deep(.el-input__inner:focus), :deep(.el-textarea__inner:focus) {
  border-color: var(--accent-color) !important;
}

:deep(.el-select-dropdown) {
  background-color: var(--medium-bg) !important;
  border: 1px solid rgba(0, 204, 255, 0.2) !important;
}

:deep(.el-select-dropdown__item) {
  color: var(--text-secondary) !important;
}

:deep(.el-select-dropdown__item.hover, .el-select-dropdown__item:hover) {
  background-color: rgba(0, 204, 255, 0.1) !important;
}

:deep(.el-select-dropdown__item.selected) {
  color: var(--accent-color) !important;
  font-weight: bold !important;
}

:deep(.el-button--mini) {
  font-size: 12px !important;
  border-radius: 4px !important;
}

:deep(.el-message-box) {
  background-color: var(--medium-bg) !important;
  border: 1px solid rgba(0, 204, 255, 0.2) !important;
  border-radius: 6px !important;
}

:deep(.el-message-box__title) {
  color: var(--text-primary) !important;
}

:deep(.el-message-box__content) {
  color: var(--text-secondary) !important;
}

:deep(.el-message-box__btns .el-button) {
  background: transparent !important;
  border: 1px solid var(--accent-color) !important;
  color: var(--accent-color) !important;
}

:deep(.el-message-box__btns .el-button--primary) {
  background: var(--accent-color) !important;
  color: var(--dark-bg) !important;
}

.tech-dialog {
  animation: dialogFadeIn 0.3s ease;
  transform-origin: center top;
}

@keyframes dialogFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.el-form {
  margin-bottom: 0;
}

/* 添加缓动效果，使对话框显示更平滑 */
.dialog-enter-active {
  transition: all 0.3s ease;
}
.dialog-leave-active {
  transition: all 0.3s ease;
}
.dialog-enter, .dialog-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
</style> 